<!-- 折线图 -->
<template>
    <div class="echarts-box">
        <div id="myEcharts" :style="{ width: this.width, height: this.height }"></div>
    </div>
</template>
<script>
import * as echarts from "echarts";
import { onMounted, onUnmounted } from "vue";
export default {
    name: "App",
    props: ["width", "height"],
    setup() {
        let myEcharts = echarts;
        onMounted(() => {
            initChart();
        });
        onUnmounted(() => {
            myEcharts.dispose;
        });
        function initChart() {
            let chart = myEcharts.init(document.getElementById("myEcharts"), "purple-passion");
            // 折线图的数据和样式
            chart.setOption({
                title: {
                    text: "收益走势",
                    left: "center",
                },
                xAxis: {
                    type: "category",
                    data: [
                        "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"
                    ]
                },
                tooltip: {
                    trigger: "axis"
                },
                yAxis: {
                    type: "value"
                },
                series: [
                    {
                        data: [
                            1.5, 1.2, 2.6, 2.1, 1.5, 1.7,2.6, 2.1, 2.3, 1.8,3.1, 2.9
                        ],
                        type: "line",
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: "top",
                                    formatter: "{c}"
                                }
                            }
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [  // 渐变颜色
                                    {
                                        offset: 0,
                                        color: 'red',
                                    },
                                    {
                                        offset: 1,
                                        color: 'red',
                                    },
                                ],
                                global: false,
                            },
                        },
                    }
                ]
            });
            window.onresize = function () {
                chart.resize();
            };
        }
        return {
            initChart
        };
    }
};
</script>

